<template>
  <view class="appointment-container">
    <wd-calendar-view
      v-model="selectedDate"
      :min-date="minDate"
      :max-date="maxDate"
      @change="handleDateChange"
    />

    <view class="time-slot-container">
      <h3>选择预约时间段</h3>
      <view class="time-slot-list">
        <button
          v-for="(time, index) in timeSlots"
          :key="index"
          @click="selectTimeSlot(time)"
          :class="{ active: selectedTimeSlot === time }"
        >
          {{ time }}
        </button>
      </view>
    </view>

    <view class="selected-datetime" v-if="selectedDate && selectedTimeSlot">
      <h4>您选择的预约时间是：</h4>
      <p>{{ getFullDateTime() }}</p>
    </view>
  </view>
  <view class="mb-4 mr-2 ml-2">
    <wd-button block @click="handleAppointment">提交预约</wd-button>
  </view>
  <wd-toast />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useUserStore } from '@/store'
import { addWork } from '@/api/work'
import cache from '@/utils/cache'
import { useToast } from 'wot-design-uni'

// 初始化日期和时间选择状态
const selectedDate = ref<Date | null>(null)
const selectedTimeSlot = ref<string | null>(null)
const minDate = new Date()
const maxDate = new Date(new Date().setMonth(new Date().getMonth() + 1))
const userStore = useUserStore()

const toast = useToast()

// 时间段数组
const timeSlots = [
  '08:00 - 09:00',
  '09:00 - 10:00',
  '10:00 - 11:00',
  '11:00 - 12:00',
  '14:00 - 15:00',
  '15:00 - 16:00',
  '16:00 - 17:00',
  '17:00 - 18:00',
]

// 当日期改变时处理
const handleDateChange = ({ value }: { value: Date }) => {
  selectedDate.value = value
  console.log('selected date:', value)
}

// 时间段选择处理
const selectTimeSlot = (time: string) => {
  selectedTimeSlot.value = time
  console.log('selected time slot:', time)
}

// 获取完整的预约日期和时间
const getFullDateTime = () => {
  if (selectedDate.value && selectedTimeSlot.value) {
    const formattedDate = new Date(selectedDate.value).toLocaleDateString() // 使用本地日期格式
    return `${formattedDate} ${selectedTimeSlot.value}`
  }
  return ''
}

// 提交预约处理
const handleAppointment = () => {
  if (!selectedDate.value || !selectedTimeSlot.value) {
    console.error('请选择预约时间')
    return
  }

  // 提取时间段的起始时间 (例如 '08:00 - 09:00' 中的 '08:00')
  const [startTime] = selectedTimeSlot.value.split(' - ')
  const [hours, minutes] = startTime.split(':').map(Number)

  // 创建一个新的 Date 对象，日期使用 selectedDate 且时间使用 selectedTimeSlot 的起始时间
  const appointmentDate = new Date(selectedDate.value)
  appointmentDate.setHours(hours, minutes, 0, 0) // 设置小时和分钟

  console.log('提交预约：', appointmentDate)
  addWork({
    openid: userStore.userInfo.openid,
    consultId: cache.get('counselorInfo').id,
    date: appointmentDate,
  }).then(() => {
    toast.success('预约成功')
  })
}
</script>

<style lang="scss" scoped>
.appointment-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
}

.time-slot-container {
  width: 100%;
  margin-top: 16px;
}

h3 {
  margin-bottom: 8px;
  text-align: center;
}

.time-slot-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

button {
  padding: 8px 16px;
  cursor: pointer;
  background-color: #f0f0f0;
  border: none;
  border-radius: 4px;
  transition: background-color 0.2s;

  &.active {
    color: white;
    background-color: #007bff;
  }
}

.selected-datetime {
  margin-top: 16px;
  text-align: center;
}
</style>
